রিঅ্যাক্ট সিলেক্টিভ হাইড্রেশন স্ট্র্যাটেজি ইঞ্জিন: গ্লোবাল পারফরম্যান্সের জন্য ইন্টেলিজেন্ট কম্পোনেন্ট লোডিং

ওয়েব ডেভেলপমেন্টের ক্রমাগত পরিবর্তনশীল জগতে, অসাধারণ পারফরম্যান্স প্রদান করা সবচেয়ে গুরুত্বপূর্ণ। রিঅ্যাক্ট দিয়ে তৈরি অ্যাপ্লিকেশনগুলির জন্য, এটি অর্জন করতে প্রায়শই সার্ভার-সাইড রেন্ডারিং (SSR) এবং ক্লায়েন্ট-সাইড রেন্ডারিং (CSR)-এর মধ্যে একটি সতর্ক ভারসাম্য বজায় রাখতে হয়। SSR প্রাথমিক লোড স্পিড বাড়ায় এবং CSR ইন্টারঅ্যাক্টিভিটি নিশ্চিত করে। তবে, হাইড্রেশন প্রক্রিয়ার সময় একটি সাধারণ চ্যালেঞ্জ দেখা দেয় – ক্লায়েন্টে সার্ভার-রেন্ডার করা HTML-এ জাভাস্ক্রিপ্ট ইভেন্ট লিসেনার পুনরায় সংযুক্ত করা। প্রচলিত হাইড্রেশন একটি বাধা হয়ে দাঁড়াতে পারে, বিশেষত অসংখ্য কম্পোনেন্ট সহ জটিল অ্যাপ্লিকেশনগুলির জন্য। এটি প্রাথমিক ব্যবহারকারীর অভিজ্ঞতা এবং সম্পৃক্ততাকে প্রভাবিত করে, বিশেষ করে আমাদের বিশ্বব্যাপী দর্শকদের জন্য যারা বিভিন্ন নেটওয়ার্ক কন্ডিশন এবং ডিভাইসের ক্ষমতা জুড়ে ইন্টারঅ্যাক্ট করে।

এইখানেই একটি রিঅ্যাক্ট সিলেক্টিভ হাইড্রেশন স্ট্র্যাটেজি ইঞ্জিন-এর ধারণা একটি শক্তিশালী সমাধান হিসেবে উঠে আসে। একটি মনোলিথিক, 'সব অথবা কিছুই না' হাইড্রেশন পদ্ধতির পরিবর্তে, একটি সিলেক্টিভ স্ট্র্যাটেজি কম্পোনেন্টগুলির ইন্টেলিজেন্ট, অগ্রাধিকারভিত্তিক লোডিং এবং হাইড্রেশনের অনুমতি দেয়। এই ব্লগ পোস্টটি এই ধরনের একটি ইঞ্জিনের নীতি, আর্কিটেকচার, সুবিধা এবং বাস্তবায়ন নিয়ে গভীরভাবে আলোচনা করবে, যা ডেভেলপারদের দ্রুত, আরও প্রতিক্রিয়াশীল এবং বিশ্বব্যাপী অ্যাক্সেসযোগ্য রিঅ্যাক্ট অ্যাপ্লিকেশন তৈরি করতে সক্ষম করবে।

প্রচলিত হাইড্রেশনের সমস্যা

সমাধানগুলি অন্বেষণ করার আগে, রিঅ্যাক্টে প্রচলিত হাইড্রেশন প্রক্রিয়ার সীমাবদ্ধতাগুলি বোঝা অত্যন্ত গুরুত্বপূর্ণ।

হাইড্রেশন কী?

SSR ব্যবহার করার সময়, সার্ভার প্রি-রেন্ডার করা HTML ব্রাউজারে পাঠায়। এই HTML স্ট্যাটিক থাকে যতক্ষণ না ক্লায়েন্ট-সাইডে রিঅ্যাক্ট দায়িত্ব নেয়। হাইড্রেশন হল সেই প্রক্রিয়া যার মাধ্যমে রিঅ্যাক্ট এই সার্ভার-রেন্ডার করা HTML স্ক্যান করে, একটি ভার্চুয়াল DOM রিপ্রেজেন্টেশন তৈরি করে, এবং তারপর সংশ্লিষ্ট ইভেন্ট লিসেনার এবং লজিক সংযুক্ত করে DOM-কে ইন্টারঅ্যাক্টিভ করে তোলে। মূলত, এটি স্ট্যাটিক পেজকে ডাইনামিক করে তোলে।

বাধা: একটি মনোলিথিক পদ্ধতি

অনেক SSR ফ্রেমওয়ার্কে (যেমন Next.js এর আগের সংস্করণ বা ম্যানুয়াল সেটআপে) ডিফল্ট আচরণ হল পেজের সমস্ত কম্পোনেন্ট একযোগে হাইড্রেট করা। এটি বেশ কিছু সমস্যার কারণ হতে পারে:

• প্রাথমিক জাভাস্ক্রিপ্ট এক্সিকিউশনের উচ্চ সময়: ক্লায়েন্টের ব্রাউজারকে প্রতিটি কম্পোনেন্ট হাইড্রেট করার জন্য একটি উল্লেখযোগ্য পরিমাণ জাভাস্ক্রিপ্ট পার্স, কম্পাইল এবং এক্সিকিউট করতে হয়। এটি মূল থ্রেডকে ব্লক করতে পারে, ইন্টারঅ্যাক্টিভিটি বিলম্বিত করে এবং একটি দুর্বল First Contentful Paint (FCP) এবং Largest Contentful Paint (LCP)-এর কারণ হতে পারে।
• মেমরি ব্যবহার বৃদ্ধি: অসংখ্য কম্পোনেন্ট একসাথে হাইড্রেট করলে যথেষ্ট মেমরি খরচ হতে পারে, বিশেষ করে লো-এন্ড ডিভাইস বা পুরানো ব্রাউজারগুলিতে, যা নির্দিষ্ট কিছু অঞ্চলে সাধারণ।
• অপ্রয়োজনীয় কাজ: প্রায়শই, ব্যবহারকারীরা প্রাথমিকভাবে একটি পেজের কম্পোনেন্টগুলির শুধুমাত্র একটি অংশের সাথে ইন্টারঅ্যাক্ট করে। যে কম্পোনেন্টগুলি অবিলম্বে দৃশ্যমান বা ইন্টারঅ্যাক্টিভ নয়, সেগুলিকে হাইড্রেট করা রিসোর্সের অপচয়।
• গ্লোবাল পারফরম্যান্সের বৈষম্য: উচ্চ-লেটেন্সি নেটওয়ার্ক বা সীমিত ব্যান্ডউইথ সহ অঞ্চলগুলির ব্যবহারকারীরা এই বিলম্বগুলি আরও তীব্রভাবে অনুভব করবে, যা বিশ্বজুড়ে পারফরম্যান্সের বৈষম্য বাড়িয়ে তুলবে।

সিলেক্টিভ হাইড্রেশন স্ট্র্যাটেজি ইঞ্জিনের পরিচিতি

একটি সিলেক্টিভ হাইড্রেশন স্ট্র্যাটেজি ইঞ্জিন এই সীমাবদ্ধতাগুলি সমাধান করার জন্য হাইড্রেশন প্রক্রিয়াকে ইন্টেলিজেন্ট এবং ডাইনামিক করার লক্ষ্য রাখে। একটি সাধারণ পদ্ধতির পরিবর্তে, এটি বিভিন্ন মানদণ্ডের ভিত্তিতে কম্পোনেন্টগুলিকে অগ্রাধিকার দেয় এবং লোড করে, নিশ্চিত করে যে অ্যাপ্লিকেশনের সবচেয়ে গুরুত্বপূর্ণ অংশগুলি প্রথমে ইন্টারঅ্যাক্টিভ হয়।

সিলেক্টিভ হাইড্রেশনের মূল নীতি

এর অন্তর্নিহিত দর্শনটি围绕 করে:

• অগ্রাধিকার প্রদান (Prioritization): ব্যবহারকারীর ইন্টারঅ্যাকশন বা প্রাথমিক সম্পৃক্ততার জন্য কোন কম্পোনেন্টগুলি সবচেয়ে গুরুত্বপূর্ণ তা চিহ্নিত করা।
• অলসতা (Laziness): কম্পোনেন্টগুলির হাইড্রেশন ততক্ষণ পর্যন্ত স্থগিত রাখা যতক্ষণ না সেগুলি সত্যিই প্রয়োজন হয় বা দৃশ্যমান হয়।
• ডাইনামিক লোডিং (Dynamic Loading): প্রয়োজনের সময় কম্পোনেন্ট লোড এবং হাইড্রেট করা।
• কনফিগারেশন (Configuration): ডেভেলপারদের হাইড্রেশন স্ট্র্যাটেজি সংজ্ঞায়িত এবং কাস্টমাইজ করার অনুমতি দেওয়া।

একটি স্ট্র্যাটেজি ইঞ্জিনের আর্কিটেকচারাল উপাদান

একটি শক্তিশালী সিলেক্টিভ হাইড্রেশন স্ট্র্যাটেজি ইঞ্জিনে সাধারণত বেশ কয়েকটি মূল উপাদান থাকে:

1. কম্পোনেন্ট রেজিস্ট্রি: একটি কেন্দ্রীয় স্থান যেখানে সমস্ত কম্পোনেন্ট তাদের হাইড্রেশন আচরণ সম্পর্কে মেটাডেটা সহ রেজিস্টার করা হয়। এই মেটাডেটাতে অগ্রাধিকার স্তর, দৃশ্যমানতার থ্রেশহোল্ড, বা সুস্পষ্ট নির্ভরতার তথ্য থাকতে পারে।
2. হাইড্রেশন ম্যানেজার: এটি অর্কেস্ট্রেটর যা অ্যাপ্লিকেশনের অবস্থা পর্যবেক্ষণ করে এবং কোন কম্পোনেন্টগুলি হাইড্রেশনের জন্য প্রস্তুত তা নির্ধারণ করে। এটি কম্পোনেন্ট রেজিস্ট্রি এবং ব্রাউজারের ভিউপোর্ট বা অন্যান্য সংকেতের সাথে ইন্টারঅ্যাক্ট করে।
3. লোডিং স্ট্র্যাটেজি মডিউল: এই মডিউলটি কখন এবং কীভাবে কম্পোনেন্টগুলি লোড এবং হাইড্রেট করা উচিত তার নিয়ম সংজ্ঞায়িত করে। এটি ভিউপোর্টের দৃশ্যমানতা (Intersection Observer), ব্যবহারকারীর ইন্টারঅ্যাকশন (স্ক্রল, ক্লিক), বা সময়-ভিত্তিক ট্রিগারের উপর ভিত্তি করে হতে পারে।
4. হাইড্রেশন কিউ: হাইড্রেশন টাস্কগুলির ক্রম এবং কনকারেন্সি পরিচালনা করার একটি প্রক্রিয়া, যা নিশ্চিত করে যে উচ্চ-অগ্রাধিকারের কম্পোনেন্টগুলি প্রথমে প্রক্রিয়া করা হয় এবং ব্রাউজারকে অভিভূত করা এড়ানো হয়।
5. কনফিগারেশন ইন্টারফেস: ডেভেলপারদের জন্য অ্যাপ্লিকেশনের বিভিন্ন কম্পোনেন্ট বা বিভাগের জন্য ঘোষণামূলকভাবে বা অপরিহার্যভাবে হাইড্রেশন স্ট্র্যাটেজি সংজ্ঞায়িত করার একটি উপায়।

সিলেক্টিভ হাইড্রেশনের জন্য স্ট্র্যাটেজি

একটি সিলেক্টিভ হাইড্রেশন ইঞ্জিনের কার্যকারিতা তার ব্যবহৃত স্ট্র্যাটেজিগুলির বৈচিত্র্য এবং বুদ্ধিমত্তার উপর নির্ভর করে। এখানে কিছু সাধারণ এবং শক্তিশালী পদ্ধতি রয়েছে:

১. ভিউপোর্ট-ভিত্তিক হাইড্রেশন (লেজি হাইড্রেশন)

এটি সবচেয়ে স্বজ্ঞাত এবং প্রভাবশালী কৌশলগুলির মধ্যে একটি। যে কম্পোনেন্টগুলি বর্তমানে ব্যবহারকারীর ভিউপোর্টের মধ্যে নেই সেগুলির হাইড্রেশন স্থগিত রাখা হয়। হাইড্রেশন তখনই ট্রিগার হয় যখন একটি কম্পোনেন্ট স্ক্রল করে ভিউতে আসে।

• প্রক্রিয়া: `Intersection Observer` API ব্যবহার করে, যা দক্ষতার সাথে সনাক্ত করে কখন একটি এলিমেন্ট ভিউপোর্টে প্রবেশ করে বা প্রস্থান করে।
• সুবিধা: প্রাথমিক জাভাস্ক্রিপ্ট লোড এবং এক্সিকিউশন সময় উল্লেখযোগ্যভাবে হ্রাস করে, যা ব্যবহারকারীর জন্য অনেক দ্রুত অনুভূত লোডের কারণ হয়। এটি বিশেষত দীর্ঘ পেজগুলির জন্য উপকারী যেখানে অনেক কম্পোনেন্ট ফোল্ডের নিচে থাকে।
• গ্লোবাল প্রাসঙ্গিকতা: বিশেষত ধীরগতির ইন্টারনেট সংযোগ সহ অঞ্চলগুলিতে মূল্যবান যেখানে সমস্ত জাভাস্ক্রিপ্ট আগে থেকে ডাউনলোড এবং এক্সিকিউট করা নিষিদ্ধ হতে পারে।

উদাহরণ: একটি ই-কমার্স পণ্য তালিকা পেজে, যে পণ্যগুলির কম্পোনেন্টগুলি প্রাথমিকভাবে স্ক্রিনের বাইরে থাকে সেগুলি হাইড্রেট হবে না যতক্ষণ না ব্যবহারকারী নিচে স্ক্রল করে এবং সেগুলি দৃশ্যমান হয়।

২. প্রায়োরিটি-ভিত্তিক হাইড্রেশন

সব কম্পোনেন্ট সমানভাবে তৈরি হয় না। কিছু কম্পোনেন্ট তাৎক্ষণিক ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ (যেমন, নেভিগেশন, হিরো সেকশন, প্রাথমিক কল-টু-অ্যাকশন), যেখানে অন্যগুলি কম গুরুত্বপূর্ণ (যেমন, ফুটার, সম্পর্কিত আইটেম, চ্যাট উইজেট)।

• প্রক্রিয়া: কম্পোনেন্টগুলিকে একটি অগ্রাধিকার স্তর (যেমন, 'উচ্চ', 'মাঝারি', 'নিম্ন') বরাদ্দ করা হয়। হাইড্রেশন ম্যানেজার এই অগ্রাধিকারগুলির উপর ভিত্তি করে হাইড্রেশন কিউ প্রক্রিয়া করে।
• সুবিধা: নিশ্চিত করে যে UI-এর সবচেয়ে গুরুত্বপূর্ণ অংশগুলি প্রথমে ইন্টারঅ্যাক্টিভ হয়, এমনকি যদি সেগুলি অবিলম্বে দৃশ্যমান না হয় বা কম গুরুত্বপূর্ণ কম্পোনেন্টগুলির সাথে রেন্ডার করা হয়।
• গ্লোবাল প্রাসঙ্গিকতা: একটি উপযোগী অভিজ্ঞতা প্রদান করে যেখানে কম সক্ষম ডিভাইস বা নেটওয়ার্কে থাকা ব্যবহারকারীদের জন্য অপরিহার্য কার্যকারিতাগুলিকে অগ্রাধিকার দেওয়া হয়।

উদাহরণ: একটি সংবাদ নিবন্ধ পেজ মন্তব্য বিভাগ বা বিজ্ঞাপন মডিউলের ('নিম্ন' অগ্রাধিকার) চেয়ে নিবন্ধের বিষয়বস্তু এবং লেখকের তথ্য হাইড্রেট করতে অগ্রাধিকার দিতে পারে ('উচ্চ' অগ্রাধিকার)।

৩. ইন্টারঅ্যাকশন-ভিত্তিক হাইড্রেশন

কিছু নির্দিষ্ট কম্পোনেন্ট তখনই প্রাসঙ্গিক হয়ে ওঠে যখন ব্যবহারকারী পেজের একটি নির্দিষ্ট এলিমেন্ট বা বিভাগের সাথে ইন্টারঅ্যাক্ট করে।

• প্রক্রিয়া: একটি কম্পোনেন্টের হাইড্রেশন ব্যবহারকারীর ক্রিয়ার দ্বারা ট্রিগার হয়, যেমন একটি বোতামে ক্লিক করা, একটি এলিমেন্টের উপর হোভার করা, বা একটি ইনপুট ফিল্ডে ফোকাস করা।
• সুবিধা: যে কম্পোনেন্টগুলি কোনও নির্দিষ্ট ব্যবহারকারী দ্বারা কখনও ব্যবহার নাও হতে পারে সেগুলির হাইড্রেশন প্রতিরোধ করে, যা রিসোর্সের ব্যবহার অপ্টিমাইজ করে।
• গ্লোবাল প্রাসঙ্গিকতা: সীমিত ডেটা প্ল্যান সহ ব্যবহারকারীদের জন্য ডেটা খরচ এবং প্রক্রিয়াকরণ হ্রাস করে, যা বিশ্বের অনেক অংশে একটি গুরুত্বপূর্ণ বিবেচনা।

উদাহরণ: একটি মোডাল ডায়ালগ বা একটি টুলটিপ কম্পোনেন্ট শুধুমাত্র তখনই হাইড্রেট হতে পারে যখন ব্যবহারকারী এটি খোলার বোতামে ক্লিক করে।

৪. সময়-ভিত্তিক হাইড্রেশন

যে কম্পোনেন্টগুলি অবিলম্বে গুরুত্বপূর্ণ নয় কিন্তু একটি নির্দিষ্ট সময়ের পরে হতে পারে, সেগুলির জন্য সময়-ভিত্তিক ট্রিগার ব্যবহার করা যেতে পারে।

• প্রক্রিয়া: হাইড্রেশন একটি পূর্বনির্ধারিত বিলম্বের পরে, বা প্রাথমিক পেজ লোডের পর একটি নির্দিষ্ট সময় অতিবাহিত হওয়ার পরে ঘটার জন্য নির্ধারিত হয়।
• সুবিধা: যে কম্পোনেন্টগুলির একটি শক্তিশালী ট্রিগার নেই কিন্তু অবশেষে প্রয়োজন হতে পারে সেগুলির জন্য উপকারী, যা তাদের প্রাথমিক লোডকে প্রভাবিত করা থেকে বিরত রাখে কিন্তু নিশ্চিত করে যে সেগুলি শীঘ্রই উপলব্ধ হয়।
• গ্লোবাল প্রাসঙ্গিকতা: বিভিন্ন বাজারে প্রত্যাশিত ব্যবহারকারীর আচরণের উপর ভিত্তি করে টিউন করা যেতে পারে, যা প্রত্যাশিত উপযোগিতার সাথে রিসোর্সের ব্যবহার ভারসাম্য বজায় রাখে।

উদাহরণ: একটি 'সর্বশেষ সংবাদ' সাইডবার উইজেট যা তাৎক্ষণিক ইন্টারঅ্যাকশনের জন্য গুরুত্বপূর্ণ নয়, সেটি পেজ লোড হওয়ার ১০ সেকেন্ড পরে হাইড্রেট করার জন্য নির্ধারিত হতে পারে।

৫. প্রগ্রেসিভ হাইড্রেশন

এটি একটি আরও উন্নত ধারণা, যা প্রায়শই উপরের বেশ কয়েকটি স্ট্র্যাটেজির সমন্বয় করে। এটি হাইড্রেশন প্রক্রিয়াকে ছোট, পরিচালনাযোগ্য খণ্ডে বিভক্ত করে যা ক্রমানুসারে বা সমান্তরালভাবে কার্যকর করা হয় যখন রিসোর্স উপলব্ধ হয় এবং ট্রিগার পূরণ হয়।

• প্রক্রিয়া: কম্পোনেন্টগুলি ব্যাচে হাইড্রেট করা হয়, প্রায়শই অগ্রাধিকার, দৃশ্যমানতা এবং উপলব্ধ ব্যান্ডউইথের সংমিশ্রণের উপর ভিত্তি করে।
• সুবিধা: পারফরম্যান্স এবং রিসোর্স ব্যবহারের উপর সূক্ষ্ম-নিয়ন্ত্রণ প্রদান করে, যা একটি অত্যন্ত অভিযোজিত এবং প্রতিক্রিয়াশীল ব্যবহারকারীর অভিজ্ঞতার অনুমতি দেয়।
• গ্লোবাল প্রাসঙ্গিকতা: সত্যিকারের বিশ্বব্যাপী দর্শকদের লক্ষ্য করে অ্যাপ্লিকেশনগুলির জন্য অপরিহার্য, কারণ এটি বিশ্বজুড়ে সম্মুখীন হওয়া বিভিন্ন নেটওয়ার্ক কন্ডিশন এবং ডিভাইসের ক্ষমতাগুলির সাথে গতিশীলভাবে সামঞ্জস্য করতে পারে।

একটি রিঅ্যাক্ট সিলেক্টিভ হাইড্রেশন স্ট্র্যাটেজি ইঞ্জিন তৈরি করা

একটি কাস্টম সিলেক্টিভ হাইড্রেশন ইঞ্জিন তৈরি করা জটিল হতে পারে। Next.js এবং Remix-এর মতো ফ্রেমওয়ার্কগুলি তাদের হাইড্রেশন স্ট্র্যাটেজিগুলি বিকশিত করছে, এবং এটি সহজ করার জন্য লাইব্রেরিগুলি উদ্ভূত হচ্ছে। তবে, মূল বাস্তবায়ন প্যাটার্নগুলি বোঝা উপকারী।

মূল বাস্তবায়ন প্যাটার্ন

1. হায়ার-অর্ডার কম্পোনেন্টস (HOCs) বা রেন্ডার প্রপস: কম্পোনেন্টগুলিকে একটি হায়ার-অর্ডার কম্পোনেন্ট দিয়ে মোড়ানো বা হাইড্রেশন লজিক ইনজেক্ট করার জন্য একটি রেন্ডার প্রপ প্যাটার্ন ব্যবহার করা। এই HOC মোড়ানো কম্পোনেন্টের দৃশ্যমানতা এবং হাইড্রেশন অবস্থা পরিচালনা করতে পারে।
2. স্টেট ম্যানেজমেন্টের জন্য কনটেক্সট এপিআই: রিঅ্যাক্টের কনটেক্সট এপিআই ব্যবহার করে অ্যাপ্লিকেশন জুড়ে হাইড্রেশন ম্যানেজারের স্টেট এবং পদ্ধতি সরবরাহ করা, যা কম্পোনেন্টগুলিকে নিজেদের রেজিস্টার করতে এবং তাদের হাইড্রেশন স্থিতি পরীক্ষা করতে দেয়।
3. কাস্টম হুকস: কাস্টম হুক তৈরি করা (যেমন, `useSelectiveHydration`) যা একটি নির্দিষ্ট কম্পোনেন্টের জন্য দৃশ্যমানতা পর্যবেক্ষণ, অগ্রাধিকার পরীক্ষা করা এবং হাইড্রেশন শুরু করার লজিককে এনক্যাপসুলেট করে।
4. সার্ভার-সাইড ইন্টিগ্রেশন: সার্ভারকে HTML রেন্ডার করতে হবে এবং সম্ভাব্যভাবে প্রতিটি কম্পোনেন্টের জন্য মেটাডেটা অন্তর্ভুক্ত করতে হবে যা ক্লায়েন্ট-সাইড হাইড্রেশন ইঞ্জিন দ্বারা ব্যবহার করা যেতে পারে। এই মেটাডেটা HTML এলিমেন্টগুলিতে ডেটা অ্যাট্রিবিউট হতে পারে।

উদাহরণ: একটি সরলীকৃত ভিউপোর্ট-ভিত্তিক হাইড্রেশন হুক

আসুন একটি সরলীকৃত `useLazyHydration` হুক বিবেচনা করি। এই হুকটি একটি কম্পোনেন্ট এবং `IntersectionObserver`-এর জন্য একটি `threshold` আর্গুমেন্ট হিসেবে নেবে।

            
import React, { useState, useEffect, useRef } from 'react';

const useLazyHydration = (options = {}) => {
  const [isVisible, setIsVisible] = useState(false);
  const elementRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(elementRef.current);
        }
      },
      {
        root: null, // Observe relative to the viewport
        rootMargin: '0px',
        threshold: options.threshold || 0.1, // Default threshold
      }
    );

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      if (elementRef.current) {
        observer.unobserve(elementRef.current);
      }
    };
  }, [options.threshold]);

  return [elementRef, isVisible];
};

export default useLazyHydration;

            

              
                Copy
              
            
          

আপনি তখন এই হুকটি একটি প্যারেন্ট কম্পোনেন্টে ব্যবহার করবেন:

            
import React, { Suspense } from 'react';
import useLazyHydration from './useLazyHydration';

// Assume MyHeavyComponent is imported lazily using React.lazy
const MyHeavyComponent = React.lazy(() => import('./MyHeavyComponent'));

function LazyComponentWrapper({ children }) {
  const [ref, isVisible] = useLazyHydration({ threshold: 0.5 });

  return (
    

      {isVisible ? (
        Loading component...
}>
          {children}
        
      ) : (
        // Placeholder content while not visible
        

          Placeholder for future content
        
      )}